<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>18 transform的运用</title>
	<style type="text/css">
		#box{
			width: 50px;
			height: 50px;
			background-color:red;
			/*transform: translate(100px,200px) rotate(10deg) scale(2.0) skew(10deg);*/

		}
	</style>
</head>
<body>
	<button id="btn">形变</button>
	<div id="box"></div>
	<script>
		window.onload = function(){
			var btn = document.getElementById('btn');
			var box = document.getElementById('box');
			var index = 0;
			btn.onclick = function(){
				index++;
				box.style.transform = `translate(${index * 100}px,${index * 50}px) rotate(${index * 10}deg) scale(${index * 1.3})`;
			}
		}
	</script>
	
</body>
</html>